import React from 'react';
import * as am4core from '@amcharts/amcharts4/core'
import * as am4charts from '@amcharts/amcharts4/charts'
// import am4themes_animated from '@amcharts/amcharts4/themes/animated'
import Logo from '../../logo.svg'

export default class LineAmcharts extends React.Component {
  componentDidMount() {
    // Create chart instance
    // Themes begin
    // am4core.useTheme(am4themes_animated);
    // Themes end

    // / Create chart instance
    let chart = am4core.create("chartdiv", am4charts.XYChart);

    // Add data
    chart.data = generateChartData();

    // Create axes
    let XAxis = chart.xAxes.push(new am4charts.ValueAxis());
    XAxis.fill = 'black'
    XAxis.events.on('focus', (ev) => {
      console.log('111', ev)
    })
    let valueAxis = chart.yAxes.push(new am4charts.ValueAxis());

    // Create series
    let series = chart.series.push(new am4charts.LineSeries());
    series.dataFields.valueY = "visits";
    series.dataFields.valueX = "xValue";
    series.strokeWidth = 1;
    series.minBulletDistance = 10;
    series.tooltipText = "{valueY}";
    series.fillOpacity = 0.1;
    series.tooltip.pointerOrientation = "vertical";
    series.tooltip.background.cornerRadius = 20;
    series.tooltip.background.fillOpacity = 0.5;
    series.tooltip.label.padding(12, 12, 12, 12)


    let seriesRange = XAxis.createSeriesRange(series);
    seriesRange.contents.strokeDasharray = "2,3";
    seriesRange.contents.stroke = chart.colors.getIndex(8);
    seriesRange.contents.strokeWidth = 1;

    let pattern = new am4core.LinePattern();
    pattern.rotation = -45;
    pattern.stroke = seriesRange.contents.stroke;
    pattern.width = 1000;
    pattern.height = 1000;
    pattern.gap = 6;
    seriesRange.contents.fill = pattern;
    seriesRange.contents.fillOpacity = 0.5;

    // Add scrollbar
    // chart.scrollbarX = new am4core.Scrollbar();

    function generateChartData(result = false) {
      let chartData = [];
      let firstDate = new Date();
      firstDate.setDate(firstDate.getDate() - 200);
      let visits = 1200;
      for (var i = 0; i < 200; i++) {
        // we create date objects here. In your data, you can have date strings
        // and then set format of your dates using chart.dataDateFormat property,
        // however when possible, use date objects, as this will speed up chart rendering.
        let newDate = new Date(firstDate);
        newDate.setDate(newDate.getDate() + i);

        // visits += Math.round((Math.random() < 0.5 ? 1 : -1) * Math.random() * 10);
        visits += i
        let xValue = i

        if (result) {
          xValue += 10
        }
        chartData.push({
          date: newDate,
          visits: visits,
          xValue
        });
      }
      console.log('使用的数据', chartData)
      return chartData;
    }


    // add range
    let range = XAxis.axisRanges.push(new am4charts.ValueAxisDataItem());
    range.grid.stroke = chart.colors.getIndex(0);
    range.grid.strokeOpacity = 1;
    range.bullet = new am4core.ResizeButton();
    range.bullet.background.fill = 'red'
    range.bullet.fill = 'white'
    range.bullet.background.states.copyFrom(chart.zoomOutButton.background.states);
    range.bullet.minX = 0;
    range.bullet.draggable = false;
    // range.bullet.adapter.add("minY", function (minY, target) {
    //   target.maxY = chart.plotContainer.maxHeight;
    //   target.maxX = chart.plotContainer.maxWidth;
    //   return chart.plotContainer.maxHeight;
    // })
    range.value = XAxis.xToValue(250)
    seriesRange.value = range.value;
    range.bullet.events.on("hit", function (ev) {
      // chart.openPopup("Hello there!");
      console.log('ev', ev)
      console.log('当前像素位置', range.bullet.pixelX)
      range.value = XAxis.xToValue(range.bullet.pixelX + 20);
      seriesRange.value = range.value;
    })

    // 增加一个按钮
    let playButton = chart.plotContainer.createChild(am4core.Button);
    playButton.x = am4core.percent(97);
    playButton.y = am4core.percent(95);
    playButton.dy = -2;
    playButton.verticalCenter = "middle";
    playButton.events.on("toggled", function (event) {
      if (event.target.isActive) {
        console.log('点击播放')
        chart.data = generateChartData(true);
      }
      else {
        console.log('点击暂停')
        chart.data = generateChartData();
      }
    })
    chart.seriesContainer.events.on('hit', (ev) => {
      console.log('eeeeee', ev.target.baseSprite)
    })


    // let range2 = XAxis.axisRanges.push(new am4charts.ValueAxisDataItem());
    // range2.grid.stroke = chart.colors.getIndex(0);
    // range2.grid.strokeDasharray
    // range.grid.strokeOpacity = 1;
    // range.bullet = new am4core.ResizeButton();
    // range2.bullet.dr
    // range.bullet.background.fill = chart.colors.getIndex(0);
    // range.bullet.background.states.copyFrom(chart.zoomOutButton.background.states);
    // range.bullet.minX = 0;
    // range.bullet.adapter.add("minY", function (minY, target) {
    //   target.maxY = chart.plotContainer.maxHeight;
    //   target.maxX = chart.plotContainer.maxWidth;
    //   return chart.plotContainer.maxHeight;
    // })

    range.bullet.events.on("hit", function (ev) {
      // chart.openPopup("Hello there!");
      console.log('当前 点击的数值', ev.target.dataItem.values)
      console.log('axisLength', XAxis.axisLength)
      console.log('xxxx', XAxis.x)
      console.log('yyyy', XAxis.y)

      console.log('anyToPoint', XAxis.anyToPoint(150))
      console.log('anyToPosition', XAxis.anyToPosition(127))
      console.log('getPixelX', XAxis.getPixelX(127))
      console.log('getPositionLabel', XAxis.getPositionLabel(127))
      // console.log('getPositionX', XAxis.getPositionX(500))
      console.log('getRelativeX', XAxis.getRelativeX(127))



      range.value = XAxis.xToValue(XAxis.anyToPoint(150).x);
      seriesRange.value = range.value;
    })


    let firstTime = chart.data[0].date.getTime();
    let lastTime = chart.data[chart.data.length - 1].date.getTime();
    let date = new Date(firstTime + (lastTime - firstTime) / 2);

    range.date = date;

    seriesRange.date = date;
    seriesRange.endDate = chart.data[chart.data.length - 1].date;
    chart.events.on('appeared', (ev) => {
      console.log('appear')
      // console.log('chart', chart, 'maxY', chart.maxY, 'maxHeight', chart.maxHeight)
    })
    chart.events.on('beforedatavalidated', (ev) => {
      console.log('beforedatavalidated')
      // console.log('chart', chart, 'maxY', chart.maxY, 'maxHeight', chart.maxHeight)
    })
    chart.events.on('beforedisposed', (ev) => {
      console.log('beforedisposed')
      // console.log('chart', chart, 'maxY', chart.maxY, 'maxHeight', chart.maxHeight)
    })
    chart.events.on('beforevalidated', (ev) => {
      console.log('beforevalidated')
      // console.log('chart', chart, 'maxY', chart.maxY, 'maxHeight', chart.maxHeight)
    })
    chart.events.on('childremoved', (ev) => {
      console.log('childremoved')
      // console.log('chart', chart, 'maxY', chart.maxY, 'maxHeight', chart.maxHeight)
    })
    chart.events.on('dataitemsvalidated', (ev) => {
      console.log('dataitemsvalidated')
      // console.log('chart', chart, 'maxY', chart.maxY, 'maxHeight', chart.maxHeight)
    })
    chart.events.on('datavalidated', (ev) => {
      console.log('datavalidated')
      // console.log('chart', chart, 'maxY', chart.maxY, 'maxHeight', chart.maxHeight)
    })
    chart.events.on('datarangechanged', (ev) => {
      console.log('datarangechanged')
      // console.log('chart', chart, 'maxY', chart.maxY, 'maxHeight', chart.maxHeight)
    })
    chart.events.on('enabled', (ev) => {
      console.log('enabled')
      // console.log('chart', chart, 'maxY', chart.maxY, 'maxHeight', chart.maxHeight)
    })
    chart.events.on('endchanged', (ev) => {
      console.log('endchanged')
      // console.log('chart', chart, 'maxY', chart.maxY, 'maxHeight', chart.maxHeight)
    })
    chart.events.on('globalscalechanged', (ev) => {
      console.log('globalscalechanged')
      // console.log('chart', chart, 'maxY', chart.maxY, 'maxHeight', chart.maxHeight)
    })
    chart.events.on('dataitemsvalidated', (ev) => {
      console.log('dataitemsvalidated')
      // console.log('chart', chart, 'maxY', chart.maxY, 'maxHeight', chart.maxHeight)
    })
    chart.events.on('hidden', (ev) => {
      console.log('hidden')
      // console.log('chart', chart, 'maxY', chart.maxY, 'maxHeight', chart.maxHeight)
    })
    chart.events.on('layoutvalidated', (ev) => {
      console.log('layoutvalidated')
      // console.log('chart', chart, 'maxY', chart.maxY, 'maxHeight', chart.maxHeight)
    })
    chart.events.on('positionchanged', (ev) => {
      console.log('positionchanged')
      // console.log('chart', chart, 'maxY', chart.maxY, 'maxHeight', chart.maxHeight)
    })
    chart.events.on('propertychanged', (ev) => {
      console.log('propertychanged')
      // console.log('chart', chart, 'maxY', chart.maxY, 'maxHeight', chart.maxHeight)
    })
    chart.events.on('rangechangeended', (ev) => {
      console.log('rangechangeended')
      // console.log('chart', chart, 'maxY', chart.maxY, 'maxHeight', chart.maxHeight)
    })
    chart.events.on('rangechangestarted', (ev) => {
      console.log('rangechangestarted')
      // console.log('chart', chart, 'maxY', chart.maxY, 'maxHeight', chart.maxHeight)
    })
    chart.events.on('removedfromqueue', (ev) => {
      console.log('removedfromqueue')
      // console.log('chart', chart, 'maxY', chart.maxY, 'maxHeight', chart.maxHeight)
    })
    chart.events.on('ready', (ev) => {
      console.log('ready')
      console.log('chart', chart, 'maxY', chart.maxY, 'maxHeight', chart.maxHeight)
      console.log('1111', valueAxis, '2222', valueAxis.maxY)
    })
    chart.events.on('shown', (ev) => {
      console.log('shown')
      // console.log('chart', chart, 'maxY', chart.maxY, 'maxHeight', chart.maxHeight)
    })
    chart.events.on('sizechanged', (ev) => {
      console.log('sizechanged')
      // console.log('chart', chart, 'maxY', chart.maxY, 'maxHeight', chart.maxHeight)
    })
    chart.events.on('startchanged', (ev) => {
      console.log('startchanged')
      // console.log('chart', chart, 'maxY', chart.maxY, 'maxHeight', chart.maxHeight)
    })
    chart.events.on('startendchanged', (ev) => {
      console.log('startendchanged')
      // console.log('chart', chart, 'maxY', chart.maxY, 'maxHeight', chart.maxHeight)
    })
    chart.events.on('track', (ev) => {
      console.log('track')
      // console.log('chart', chart, 'maxY', chart.maxY, 'maxHeight', chart.maxHeight)
    })
    chart.events.on('shown', (ev) => {
      console.log('shown')
      console.log('chart', chart, 'maxY', chart.maxY, 'maxHeight', chart.maxHeight)
    })
    chart.events.on('transformed', (ev) => {
      console.log('transformed')
      // console.log('chart', chart, 'maxY', chart.maxY, 'maxHeight', chart.maxHeight)
    })
    chart.events.on('transitionended', (ev) => {
      console.log('transitionended')
      // console.log('chart', chart, 'maxY', chart.maxY, 'maxHeight', chart.maxHeight)
    })

    chart.events.on('validated', (ev) => {
      console.log('validated')
      // console.log('chart', chart, 'maxY', chart.maxY, 'maxHeight', chart.maxHeight)
    })
    chart.events.on('visibilitychanged', (ev) => {
      console.log('visibilitychanged')
      // console.log('chart', chart, 'maxY', chart.maxY, 'maxHeight', chart.maxHeight)
    })
    chart.events.on('zIndexChanged', (ev) => {
      console.log('zIndexChanged')
      // console.log('chart', chart, 'maxY', chart.maxY, 'maxHeight', chart.maxHeight)
    })

    chart.events.on('wheel', (ev) => {
      console.log('wheel')
      // console.log('chart', chart, 'maxY', chart.maxY, 'maxHeight', chart.maxHeight)
    })
    chart.events.on('wheeldown', (ev) => {
      console.log('wheeldown')
      // console.log('chart', chart, 'maxY', chart.maxY, 'maxHeight', chart.maxHeight)
    })
    chart.events.on('wheelleft', (ev) => {
      console.log('wheelleft')
      // console.log('chart', chart, 'maxY', chart.maxY, 'maxHeight', chart.maxHeight)
    })
    // chart.adapter.add('maxY', (ev, b, c) => {
    //   console.log('1111111111111maxY', ev, b, c)
    // })
  }
  render() {
    return (
      <div id='chartdiv'></div>
    )
  }
}